<template>
  <div class="login">
    <div class="logo">
      <img src="http://47.115.51.185/h5/img/logo2.47964cc3.png" alt="" />
    </div>
    <div class="loginInterface">
      <template>
        <div class="loginType" v-if="$route.path == '/login' && !register">
          <span :class="{ active: loginType }" @click="loginTypeToggle"
            >账号登录</span
          >
          <span :class="{ active: !loginType }" @click="loginTypeToggle"
            >快速登录</span
          >
        </div>
        <div class="retrieve loginType" v-else>
          <span>{{ register ? "注册账号" : "找回密码" }}</span>
        </div>
      </template>

      <div class="form">
        <van-field
          left-icon="phone-circle-o"
          placeholder="输入手机号码"
          center
          v-model="phone"
        />
        <van-field
          center
          left-icon="lock"
          :placeholder="
            loginType && $route.path == '/login' ? '填写登录密码' : '填写验证码'
          "
          v-model="verificationCode"
          :type="loginType ? 'password' : 'text'"
        >
          <template #button v-if="!loginType || $route.path != '/login' || register">
            <van-button size="small" type="primary" @click="getVerification"
              >获取验证码</van-button
            >
          </template>
        </van-field>
        <van-field
          left-icon="lock"
          placeholder="填写您的登录密码"
          center
          type="password"
          v-model="newpassword"
          v-if="$route.path == '/retrieve_password' || register"
        />
        <div
          class="forget"
          v-if="loginType && $route.path == '/login' && !register"
          @click="findpassword"
        >
          <van-icon name="question-o" color="#74797a" size="0.3rem" />
          忘记密码
        </div>
        <button class="loginbtn" @click="login">
          {{ $route.path == "/login" ? (register ? "注册" : "登录") : "确认" }}
        </button>
        <template>
          <div class="tips" v-if="$route.path == '/login'">
            <span>{{ register ? "已有账号？" : "没有账号？" }}</span>
            <span @click="Toregister">{{
              register ? "立即登录" : "立即注册"
            }}</span>
          </div>
          <div class="goLogin tips" v-else @click="ToLogin">
            <span style="color: #fc4141">立即登录</span>
          </div>
        </template>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      loginType: false,
      phone: "",
      verificationCode: "",
      newpassword: "",
      register: false,
    };
  },
  computed: {
    ...mapState({
      verify_code: (state) => state.data.verify_code,
    }),
  },
  methods: {
    ...mapMutations(["getVerifyCode", "getTokenData"]),
    ...mapActions(["getUser"]),
    getVerification() {
      var result = this.verification();
      if (!result) return;
      this.axios
        .post("/api/register/verify", {
          key: this.verify_code,
          phone: this.phone,
          type: this.register ? "register" : "login",
        })
        .then((response) => {
          if (response.data.status != 200) {
            this.$toast({
              message: response.data.msg,
              icon: "cross",
            });
          } else {
            this.$toast({
              message: response.data.msg,
            });
          }
        });
    },
    login() {
      var result = this.verification();
      if (!result) return;
      if (this.$route.path == "/retrieve_password") {
        if (!this.verificationCode) {
          this.$toast("请输入验证码");
        } else {
          if (this.newpassword == "") {
            this.$toast("请输入新密码");
          } else {
            this.axios
              .post("/api/register/reset", {
                account: this.phone,
                captcha: this.verificationCode,
                code: "",
                password: this.newpassword,
              })
              .then((response) => {
                this.$toast(response.data.msg);
              });
          }
        }
        return;
      }
      if (this.register == true) {
        if (!this.verificationCode) {
          this.$toast("请输入验证码");
        } else {
          if (this.newpassword == "") {
            this.$toast("请输入登录密码");
          } else {
            this.axios
              .post("/api/register", {
                account: this.phone,
                captcha: this.verificationCode,
                password: this.newpassword,
                spread: null,
              })
              .then((response) => {
                this.$toast(response.data.msg);
              });
          }
        }
        return;
      }
      if (this.loginType != false && this.register == false) {
        if (!this.verificationCode) {
          this.$toast("请输入登录密码");
        } else {
          if (
            this.verificationCode.length >= 6 &&
            this.verificationCode.length <= 16
          ) {
            this.axios
              .post("/api/login", {
                password: this.verificationCode,
                account: this.phone,
                code: "",
              })
              .then((response) => {
                if (response.data.status != 200) {
                  this.$toast({
                    message: response.data.msg,
                    icon: "cross",
                  });
                } else {
                  this.getTokenData(response.data.data);
                  this.getUser();
                }
              });
          } else {
            this.$toast("密码长度为6-16");
          }
        }
        return;
      } else if (this.loginType == false && this.register == false) {
        if (!this.verificationCode) {
          this.$toast("请输入验证码");
        } else {
          this.axios
            .post("/api/login/mobile", {
              captcha: this.verificationCode,
              phone: this.phone,
              spread: null,
            })
            .then((response) => {
              if (response.data.status != 200) {
                this.$toast({
                  message: response.data.msg,
                  icon: "cross",
                });
              } else {
                this.getTokenData(response.data.data);
                this.getUser();
              }
            });
        }
        return;
      }
    },
    verification() {
      var regResult = /^1[3456789]\d{9}$/.test(this.phone);
      if (!this.phone) {
        this.$toast(this.loginType ? "请输入账号" : "请输入手机号码");
        return;
      } else if (!regResult) {
        this.$toast("请输入正确的手机号码");
        return false;
      } else {
        return true;
      }
    },
    findpassword() {
      this.$router.push({
        path: "/retrieve_password",
      });
      this.phone = "";
      this.verificationCode = "";
      document.title = "找回密码";
    },
    ToLogin() {
      this.$router.push({
        path: "/login",
      });
      this.phone = "";
      this.verificationCode = "";
      this.newpassword = "";
    },
    loginTypeToggle() {
      this.loginType = !this.loginType;
      this.phone = "";
      this.verificationCode = "";
    },
    Toregister() {
      this.register = !this.register;
      this.phone = '';
      this.verificationCode = ''
      this.newpassword = ''
    },
  },
  created() {
    this.axios.get("/api/verify_code").then((response) => {
      this.getVerifyCode(response.data.data.key);
    });
  },
  beforeRouteEnter(to, from, next) {
    next(vm=>{
      if(to.params.flag){
      vm.$toast(to.params.msg)
    }
    });
  },
};
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: linear-gradient(180deg, #eb5447 0, #ff8e3b);
  .logo {
    width: 100%;
    height: 150px;
    background-image: url(http://47.115.51.185/h5/img/registerw.b3c17e1c.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 85px;
      height: 85px;
      border: 2px solid #fff;
      border-radius: 50%;
    }
  }
  .loginInterface {
    width: 80%;
    margin: 0 auto;
    border-radius: 8px;
    padding: 20px 15px;
    background-color: #fff;
    .loginType {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: bold;
        color: #999999;
        box-sizing: border-box;
        border-bottom: 2px solid #fff;
        padding-bottom: 4px;
        &.active {
          color: black;
          border-bottom: 2px solid #f35749;
        }
      }
    }
    .retrieve {
      span {
        font-size: 16px;
        color: black;
      }
    }
    .form {
      width: 100%;
      margin-top: 5px;
      .van-cell {
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid #eee;
        .van-field__left-icon {
          margin-right: 15px;
          .van-icon {
            font-size: 0.4rem;
          }
        }
        .van-cell__value {
          .van-field__body {
            height: 25px;
            input {
              font-size: 16px;
            }
            .van-field__button {
              .van-button--primary {
                background-color: #f35446;
                border: none;
                border-radius: 20px;
              }
              .van-button--small {
                height: auto;
                padding-top: 5px;
                padding-bottom: 5px;
              }
            }
          }
        }
      }
      .forget {
        margin-top: 10px;
        font-size: 14px;
        float: right;
        color: #666666;
        .van-icon {
          vertical-align: -2px;
        }
      }
      .loginbtn {
        width: 100%;
        height: 40px;
        font-size: 16px;
        border-radius: 20px;
        margin-top: 20px;
        color: white;
        font-weight: bold;
        border: none;
        outline: none;
        background-image: linear-gradient(90deg, #eb5447 0, #ff8e3b);
      }
      .tips {
        width: 100%;
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
        span {
          &:nth-of-type(1) {
            color: #cccccc;
          }
          &:nth-of-type(2) {
            color: #fc4141;
          }
        }
      }
    }
  }
  .bottom {
    width: 80%;
    height: 15px;
    background-image: url();
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
}
</style>